<template>
  <div id="register">
    <div id="title">学生工作管理系统</div>
    <div id="title2">注册</div>
    <div id="form">
    <el-row>
      <el-col :span="2"><i class="el-icon-user-solid" style="width:40;height: 48;font-size: 40px;"></i></el-col>
      <el-col :span="22"> <el-input v-model="username" placeholder="学号/教师号" style="width: 326px;height:48px"></el-input></el-col>
    </el-row>
    <el-row>
      <el-col :span="2"><i class="el-icon-lock" style="width:40;height: 48;font-size: 40px;"></i></el-col>
      <el-col :span="22"> <el-input placeholder="密码" v-model="password" show-password style="width: 326px;height:48px"></el-input></el-col>
    </el-row>
    <el-row>
      <el-col :span="2"><i class="el-icon-lock" style="width:40;height: 48;font-size: 40px;"></i></el-col>
      <el-col :span="22"> <el-input placeholder="确认密码" v-model="password1" show-password style="width: 326px;height:48px"></el-input></el-col>
    </el-row>
    </div>
    <el-button type="primary" id="logo" @click="handle">登录并注册</el-button>
    <div id="abc">登录代表您已经阅读并同意<a href="">服务条款</a></div>
  </div>
</template>

<script>
import axios from 'axios'
 export default {
    data() {
      return {
        username: '',
        password: '',
        password1:''
      }
    },
    methods: {
          //提交给后端进行保存
          //传出：username 用户名 password 密码
          //传入： type string类型 权限（1老师，2学生，3管理员） success boolean类型，true表示成功登录
        handle(){
          if(this.username === ''){
            alert('用户名不能为空');
            return;
          }
          if(this.password!=this.password1){
            alert('密码不一致');
            return;
          }
          axios('http://127.0.0.1:4523/m2/5591894-5270100-default/244178694?apifoxApiId=244178694',{//后端链接
            username:this.username,
            password:this.password
          }).then(res=>{
            if(res.data.success){
              alert('成功注册账号')
              this.$store.commit('setLogin',1)
              this.$store.commit('setId',res.data.id)
              if(res.data.type==1){//根据后端数据判断登录
                this.$store.commit('setType','教师')//教师
                this.$router.push('/TeaHome')//教师
              }else if(res.data.type==2){
                this.$store.commit('setType','学生')//学生
                this.$router.push('/StuHome')//学生
              }else if(res.data.type==3){
                this.$store.commit('setType','管理员')//管理员
                this.$router.push('/AdminPage')//管理员
              }
            }else{
              alert('失败')
            }
          })
        }
    }
  }

</script>
<style>
#register{
  width: 457px;
    height: 563px;
    background-color: rgb(246, 244, 244,0.3);
    border: 1px solid;
    padding: 40px;
    margin: 0 auto;
    position:absolute;
    top: 88px;
    left:500px;
  }
  #title{
    font-size: 30px;
    font-weight: 500;
  }
  #title2{
    font-size: 20px;
    text-align:left;
    position:absolute;
    top:200px;
    left:90px;
  }
  #logo{
    position:absolute;
    top:450px;
    left:300px;
    width:140px;
    height: 40px;
  }
  #form{
    position:absolute;
    top:250px;
    left:90px;
  }
  #abc{
    position:absolute;
    top:530px;
    left:130px;
  }
  
</style>
